.sx__month-grid-week__week-number {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  background-color: #eceef1;
  color: var(--sx-color-on-surface);
  width: 1.5rem;
  font-size: 0.75rem;

  .is-dark & {
    background-color: #4a4458;
  }
}

.sx__month-grid-week {
  border-top: var(--sx-border);
  flex: 1;
  display: flex;

  &:first-child {
    .sx__month-grid-week__week-number {
      padding-top: 26px;
    }
  }
}

.sx__month-grid-day {
  position: relative;
  padding: var(--sx-spacing-padding2) 0;
  flex: 1;

  &:not(:last-child) {
    border-inline-end: var(--sx-border);
  }
}

.sx__month-grid-day--dragover {
  background-color: var(--sx-color-surface-container);
}

.sx__month-grid-day__header {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.sx__month-grid-day__header-day-name {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--sx-color-neutral);
}

.sx__month-grid-day__header-date {
  font-size: var(--sx-font-extra-small);
  margin-bottom: var(--sx-spacing-padding1);
  border-radius: 50%;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;

  &.sx__is-today {
    background-color: var(--sx-color-primary);
    color: var(--sx-color-on-primary);
  }
}

.sx__month-grid-day__events-more {
  width: calc(100% - 10px); // CORRELATION ID: 2 (10px subtracted from width)
  font-size: var(--sx-font-extra-small);
  color: var(--sx-color-neutral);
  margin: var(--sx-spacing-padding1) 0;
  padding: var(--sx-spacing-padding1);
  border-radius: var(--sx-rounding-extra-small);
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;

  &:hover {
    background-color: var(--sx-color-surface-container);
    color: var(--sx-color-on-surface);
  }
}

.sx__month-grid-background-event {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
